<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>基于svg的手绘风格图表插件</title>
		<style type="text/css">
			.htmleaf-content {
				width: 50%;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div class="htmleaf-container">
			<div class="htmleaf-content">
				<svg class="bar-chart"></svg>
				<svg class="pie-chart"></svg>
				<svg class="line-chart"></svg>
				<svg class="scatter-chart"></svg>
			</div>
		</div>

		<script src="source/chart.xkcd.min.js"></script>
		<script type="text/javascript">
			const svg = document.querySelector('.bar-chart')
			// github stars vs patrons
			new chartXkcd.Bar(svg, {
				// title: 'Monthly income of an indie developer',
				// xLabel: 'Month',
				// yLabel: '$ Dollors',
				data: {
					labels: ['github stars', 'patrons'],
					datasets: [{
						// label: 'Battle',
						data: [100, 2],
					}]
				},
			});

			// pie chart example: what does tim make of
			// javascript js JavaScript and JS

			const svgPie = document.querySelector('.pie-chart');
			new chartXkcd.Pie(svgPie, {
				// title: 'What Tim made of',
				data: {
					labels: ['a', 'b', 'e', 'f', 'g'],
					datasets: [{
						data: [500, 200, 80, 90, 100, ],
					}]
				},
			})

			const svgScatter = document.querySelector('.scatter-chart');

			new chartXkcd.XY(svgScatter, {
				title: 'Pokemon farms', //optional
				xLabel: 'Coodinate', //optional
				yLabel: 'Count', //optional
				data: {
					datasets: [{
						label: 'Pikachu',
						data: [{
							x: 3,
							y: 10
						}, {
							x: 4,
							y: 122
						}, {
							x: 10,
							y: 100
						}, {
							x: 1,
							y: 2
						}, {
							x: 2,
							y: 4
						}],
					}, {
						label: 'Squirtle',
						data: [{
							x: 3,
							y: 122
						}, {
							x: 4,
							y: 212
						}, {
							x: -3,
							y: 100
						}, {
							x: 1,
							y: 1
						}, {
							x: 1.5,
							y: 12
						}],
					}],
				},
				options: { //optional
					xTickCount: 5,
					yTickCount: 5,
					legendPosition: chartXkcd.config.positionType.upRight,
					showLine: false,
					timeFormat: undefined,
					dotSize: 1,
				},
			});

			const svgLine = document.querySelector('.line-chart')

			const lineChart = new chartXkcd.Line(svgLine, {
				title: 'Monthly income of an indie developer', // optional
				xLabel: 'Month', // optional
				yLabel: '$ Dollors', // optional
				data: {
					labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
					datasets: [{
						label: 'Plan',
						data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
					}, {
						label: 'Reality',
						data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
					}],
				},
				options: { // optional
					yTickCount: 3,
					legendPosition: chartXkcd.config.positionType.upLeft
				}
			});
		</script>
	</body>
</html>
